<template>
	<!--  Banner 区域 -->
	<div class="banner">
		<div class="banner-content">
			<h1>开始一段美好租房生活，优惠！</h1>
			<p>搜索需要的房源吧！</p>
			<div class="search-bar">
				<a-input v-model:value="searchQuery" placeholder="请输入关键词" class="search-input" />
				<button @click="search">开始找房</button>
			</div>
		</div>
	</div>
	<!-- 最新整租模块 -->
	<section class="latest-houses">
		<h2>最新整租</h2>
		<p>为您推荐最新发布的房源</p>
		<div class="house-cards">
			<div class="house-card" v-for="(house, index) in houses" :key="index">
				<img :src="house.imageUrls[0]" alt="房源图片" class="house-image" @click="goToDetails(house.id)" />
				<div class="house-info">
					<p class="house-title">
						<span class="title-text" @click="goToDetails(house.id)">{{ house.title }}</span>
					</p>
					<p class="house-details">
						<span @click="goToList({ businessArea: house.businessArea })"> [{{ house.businessArea }}] </span>
						<span @click="goToList({ subwayStation: house.subwayStation })">近{{ house.subwayStation }}地铁站 </span>
					</p>
				</div>
				<p class="house-price">￥{{ house.price }}</p>
			</div>
		</div>

		<a-button class="more-button" @click="moreHouse()">查看更多房源</a-button>
	</section>
</template>
<script>
	import { DownOutlined } from '@ant-design/icons-vue';
	import userApi from '@/api/userApi';

	export default {
		name: 'HomePage',
		components: {
			DownOutlined,
		},
		data() {
			return {
				isLoggedIn: false,
				username: '',
				activeKey: 'home',
				searchQuery: '',
				houses: [],
				pageNo: 1,
				pageSize: 9,
			};
		},
		methods: {
			search() {
				//如果没有关键字则传空值
				this.$router.push({ path: '/house-list', query: { keyword: this.searchQuery } });
			},
			// 获取最新房源的方法
			fetchLatestHouses() {
				userApi
					.getHouses(this.pageNo, this.pageSize) // 调用接口
					.then((res) => {
						this.houses = res.data.houses.map((house) => ({
							...house,
							imageUrls: house.imageUrls
						}));
					})
					.catch((error) => {
						console.error('无法获取房源数据，请稍后再试。'+error);
					});
			},
			// 跳转到列表页并传递参数
			goToList(filter) {
				this.$router.push({
					path: '/house-list',
					query: filter
				});

			},
			// 跳转到详情页并传递id
			goToDetails(houseId) {
				window.open(`/house-details/${houseId}`, '_blank');
			},
			// 查看更多房源
			moreHouse() {
				// 跳转到列表页
				this.$router.push({ path: '/house-list' }).then(() => {
					// 跳转后滚动到顶部
					window.scrollTo(0, 0);
				});
			},
		},
		created() {
			this.fetchLatestHouses();
		}
	};
</script>

<style scoped>
	/* Banner 区域 */
	.banner {
		margin-top: -4rem;
		background-image: url('@/assets/bg.png');
		background-size: cover;
		background-position: center;
		color: white;
		text-align: center;
		padding: 10vh 2rem;
		height: 50vh;
	}

	.banner-content {
		position: relative;
		top: 20%;
	}

	.banner-content h1 {
		font-size: 2.5rem;
		margin-bottom: 1rem;
	}

	.banner-content p {
		font-size: 1.2rem;
		margin-bottom: 2rem;
	}

	.search-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		background-color: white;
		padding: 0.5rem; /* 搜索框整体内边距减小 */
		border-radius: 8px;
		width: 50%; /* 设置搜索框容器宽度为 50% */
		margin: 0 auto;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.search-bar input {
		flex: 1;
		padding: 0.6rem; /* 输入框高度减小 */
		font-size: 0.9rem; /* 字体大小稍微减小 */
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.search-bar select {
		flex: 1;
		padding: 0.6rem; /* 下拉框高度减小 */
		font-size: 0.9rem;
		border: 1px solid #ddd;
		border-radius: 4px;
		background-color: #f9f9f9;
	}

	.search-bar button {
		padding: 0.6rem 1.5rem; /* 按钮高度和宽度减小 */
		background-color: #ff6a00;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 0.9rem;
		transition: background-color 0.3s ease;
	}

	.search-bar button:hover {
		background-color: #e55a00;
	}

	.latest-houses {
		text-align: center;
		padding: 5vh 2rem;
		background-color: #f9f9f9;
	}

	.house-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;
		max-width: 1300px;
		margin: 0 auto;
	}

	.house-card {
		width: 400px;
		border: 1px solid #ddd;
		overflow: hidden;
		background-color: #fff;
		position: relative;
	}

	.house-image {
		width: 100%;
		height: 250px;
		object-fit: fill;
		cursor: pointer;
	}

	.house-info {
		padding: 1rem;
		text-align: left;
	}

	.house-title {
		font-size: 1rem;
		font-weight: bold;
		margin: 0;
		color: #333;
	}

	.house-title .title-text:hover {
		color: #f14a26; /* 默认橙色 */
		cursor: pointer;
	}

	.house-details {
		font-size: 0.85rem;
		color: #777;
		margin: 0.5rem 0 0;
		display: flex;
		gap: 0.5rem; /* 小区和地铁站之间的间距 */
	}

	.house-details span {
		cursor: pointer;
		color: #777;
	}

	.house-details span:hover {
		color: #ff6a00; /* 默认橙色 */
	}

	.house-price {
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		font-size: 1.2rem;
		font-weight: bold;
		color: #ff6a00;
		margin: 0;
	}

	.more-button {
		background: #f87c21;
		color: white;
		margin-top: 2rem;
		width: 10%;
		height: 5vh;
	}

	.more-button:hover {
		color: white;
	}
</style>
